import { HtmlNode, HtmlNodeModel, h as flh } from '@logicflow/core';
import { createApp, h } from 'vue';
import { BaseVueNodeView, BaseVueNodeModel } from '../base-node.js';
import VueNode from './classifier.vue';

class ClassifierNode extends BaseVueNodeView {
 constructor(props) {
     super(props);
 
     this.renderVue(VueNode, props);
   }
}

class ClassifierNodeModel extends BaseVueNodeModel {
  setAttributes() {
 
    this.width = 320;
    // this.height = 340;

    this.height = 158 + (this.properties.options.categories.length) * 44;
    // this.x=100;
    // this.y=100;
    this.incoming.edges.forEach((edge) => {
     
      // 调用自定义的更新方案
      edge.updatePathByAnchor()
    })
    this.outgoing.edges.forEach((edge) => {
       
      edge.updatePathByAnchor()
    })

  }
 
  getDefaultAnchor() {
    // 定义锚点位置
    const { id, x, y, width, height, isHovered, isSelected } = this;
    const { nodeSortKey } = this.properties;
    const categories = this.properties.options.categories || [];

    let defaultAnchor = [
      {
        x: x - width / 2,
        y: y - height / 2 + 24,
        id: id,
        type: 'left'
      }
    ];
    let y0 = y - height / 2 + 63;
    for (let i = 0; i < categories.length; i++) {
      defaultAnchor.push({
        id: id+"_classifier_"+(i+1),
        x: x + width / 2,
        y: y0 + i * 44,
        type: 'right'
      });
    }
    defaultAnchor.push({
      id: id+"_classifier_else",
      x: x + width / 2,
      y: y0 + categories.length * 44,
      type: 'right'
    });
    return defaultAnchor;
  }
 
}

export default {
  type: 'classifier',
  model: ClassifierNodeModel,
  view: ClassifierNode
};
